<!-- eslint-disable vue/no-mutating-props -->
<template>
  <a-modal
    :closable="false"
    unmount-on-close
    hide-cancel
    :width="800"
    v-model:visible="props.visible"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title> 选择入职类别 </template>
    <div class="main">
      <div
        @click="changeNode(2)"
        :style="{
          backgroundColor: node === 2 ? '#3d7eff' : '#fff',
          color: node === 2 ? '#fff' : '#000'
        }"
        class="item blue"
      >
        新增到待入职
      </div>
      <div
        @click="changeNode(3)"
        :style="{
          backgroundColor: node === 3 ? '#33cc66' : '#fff',
          color: node === 3 ? '#fff' : '#000'
        }"
        class="item green"
      >
        新增到预入职
      </div>
      <div
        @click="changeNode(4)"
        :style="{
          backgroundColor: node === 5 ? '#ff9966' : '#fff',
          color: node === 4 ? '#fff' : '#000'
        }"
        class="item orange"
      >
        新增到花名册
      </div>
    </div>
  </a-modal>
</template>
<script setup lang="ts">
import { Message } from '@arco-design/web-vue';

const props = withDefaults(
  //参数说明
  defineProps<{
    visible: boolean;
    data?: any;
    refresh?: any;
  }>(),
  { visible: false }
);
const node = ref(0);
const emit = defineEmits(['update:visible', 'updataNode']);
const handleOk = () => {
  if ([1, 2, 3].indexOf(node.value) !== -1) {
    emit('updataNode', node.value);
    emit('update:visible', false);
  } else {
    Message.warning('请选择入职类别');
  }
};
const handleCancel = () => {
  Message.warning('请选择入职类别');

  // emit('update:visible', false);
};
const changeNode = (e: number) => {
  node.value = e;
};
</script>
<style lang="less" scoped>
.main {
  display: flex;
  justify-content: space-around;
  .item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 200px;
    padding: 0 20px;
    margin: 20px 0;
    border-radius: 20px;
    cursor: pointer;
  }
}
.blue {
  border: 1px solid #3d7eff;
  box-shadow: 0px 0px 14px rgba(61, 126, 255, 0.38);
}
.green {
  border: 1px solid #33cc66;
  box-shadow: 0px 0px 14px rgb(51 204 102 0.38);
}
.orange {
  border: 1px solid #ff9966;
  box-shadow: 0px 0px 14px rgb(255 153 102 0.38);
}
</style>
